<template>
    <div class="class-post-setting">
        <nav-header>
			<template slot="menuBefore">
                <li v-if="graduation === 'graduation'"><router-link to="/user/class/class-graduation" tag="a">已毕业班级</router-link></li>
                <li v-else><router-link to="/user/class/class-members" tag="a">班级列表</router-link></li>
                <li class="gap">&gt;</li>
			</template>
			<li v-text="classNxt" style="color: #999;"></li>		
		</nav-header>
        <div class="zh-h5-tabs">
            <el-button type="default" @click="toLink('/user/class/class-management')">成员</el-button>
            <el-button type="primary">岗位</el-button>
            <el-button type="default" @click="toLink('/user/class/class-timetable')">课程表</el-button>
            <el-button type="default" @click="toLink('/user/class/class-data')">资料</el-button>
        </div>
        <div class="zh-tabs">
             <div class="zh-table" v-loading="loading.status" :element-loading-text="loading.txt">
                <div class="post-title">教师岗位</div>
                <div class="post-inner">
                    <el-form label-width="100px" v-if="showEmpty(teacher_job)">
                        <el-form-item :label="job.job_name" :title="job.job_name" v-for="(job, jobInx) in teacher_job" :key="jobInx">
                            <el-select v-model="job.person_id" filterable :disabled="graduation === 'graduation'">
                                <el-option label="暂不任命" :value="0"></el-option>
                                <el-option v-for="(sel, selInx) in teacher_select" :key="selInx" :label="sel.name" :value="sel.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span class="no-she-ding" v-else>暂无设定</span>
                </div>
                <div class="post-title">学生岗位</div>
                <div class="post-inner">
                    <el-form label-width="100px" v-if="showEmpty(student_job)">
                        <el-form-item :label="stu.job_name" :title="stu.job_name" v-for="(stu, stuInx) in student_job" :key="stuInx">
                            <el-select v-model="stu.person_id" filterable  :disabled="graduation === 'graduation'">
                                <el-option label="暂不任命" :value="0"></el-option>
                                <el-option v-for="(stuSel,stuSelInx) in student_select" :key="stuSelInx" :label="stuSel.name" :value="stuSel.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span class="no-she-ding" v-else>暂无设定</span>
                </div>
                <div class="post-title">家长岗位</div>
                <div class="post-inner">
                    <el-form label-width="100px" v-if="showEmpty(parent_job)">
                        <el-form-item :label="parent.job_name" :title="parent.job_name" v-for="(parent,parentInx) in parent_job" :key="parentInx">
                            <el-select v-model="parent.person_id" filterable  :disabled="graduation === 'graduation'">
                                <el-option label="暂不任命" :value="0"></el-option>
                                <el-option v-for="(parSel,parSelInx) in parent_select" :key="parSelInx" :label="parSel.name" :value="parSel.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span class="no-she-ding" v-else>暂无设定</span>
                </div>
                <div class="post-btn" v-if="graduation !== 'graduation'">
                    <el-button @click="toLink('/user/class/class-post')">取消</el-button>
                    <el-button type="primary" @click="save">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading:{
				status:false,
				txt:'获取数据...',
			},
            teacher_job: [],
            teacher_select: [],
            student_job: [],
            student_select: [],
            parent_job: [],
            parent_select: [],
            classNxt: '',
            graduation: '',
        }
    },
    created() {
        this.getList()
        this.getClassName();
    },
    mounted() {
        if (!is_empty(this.$route.query.class) && this.$route.query.class === 'graduation') {
            this.graduation = 'graduation';
        } else {
            this.graduation = '';
        }
    },
    computed: {
        showEmpty() {
            return (obj) => {
                return !is_empty(obj);
            }
        }
    },
    methods: {
        getClassName() {
            let success = ( data => {
                this.classNxt =  data.data[0] ?  data.data[0].rename : '';
            });
            let params = {
                id: this.$route.params.id
            }

            if (this.$route.query.class === 'graduation') {
                params.status = 3;
            }

            this.$ajax.get('api/org/org', {params: params, func:{success: success}})
        },
        getList() {
            this.loading.status = true;
            let params = {
                class_id: this.$route.params.id,
            }

            const success = res => {
                this.loading.status = false;
                this.teacher_job = res.data.teacher_job;
                this.teacher_select = res.data.teacher_select;
                this.student_job = res.data.student_job;
                this.student_select = res.data.student_select;
                this.parent_job = res.data.parent_job;
                this.parent_select = res.data.parent_select;

                !is_empty(this.teacher_job) && this.teacher_job.forEach(item => {
                    item.person_id = +item.person_id;
                })
                !is_empty(this.parent_job) && this.parent_job.forEach(item => {
                    item.person_id = +item.person_id;
                })
                !is_empty(this.student_job) && this.student_job.forEach(item => {
                    item.person_id = +item.person_id;
                })
            }

  		    this.$ajax.get('api/user/class_job_data',{params:params,func:{success:success}})
        },
        save() {
            let data = [];

            if (this.teacher_job) {
                this.teacher_job.forEach(teach => {
                    data.push({
                        job_id: teach.job_id,
                        user_id: teach.person_id ? +teach.person_id : 0,
                    })
                })
            }

            if (this.student_job) {
                this.student_job.forEach(student => {
                    data.push({
                        job_id: student.job_id,
                        user_id: student.person_id ? +student.person_id : 0,
                    })
                })
            }

            if (this.parent_job) {
                this.parent_job.forEach(parent => {
                    data.push({
                        job_id: parent.job_id,
                        user_id: parent.person_id ? +parent.person_id : 0,
                    })
                })
            }

            let params = {
                class_id: this.$route.params.id,
                data: data
            }
            const success = res => {
                this.$message.success(res.msg);
                
                this.$router.push('/user/class/class-post/' + this.$route.params.id);
            }
            const fail = res => {
                this.$message.error(res.msg);
            }

			this.$ajax.post('api/user/class_job_data',params,{func:{success: success, fail: fail}})
        },
        toLink(link) {
            this.$router.push(link + '/' + this.$route.params.id + (this.graduation ? '?class=' + this.graduation : ''));
        },
    }
}
</script>
<style lang="scss">
    .class-post-setting {
        .zh-h5-tabs {
            padding-bottom: 20px;
        }

        .post-title {
            position: relative;
            border-left: 2px solid #606266;
            padding-left: 5px;
            margin: 10px 0;
            font-weight: bold;
        }
        
        .post-inner {
            .el-form-item {
                display: inline-block;
                margin-right: 36px;

                .el-form-item__label {
                    overflow: hidden !important;
                    text-overflow:ellipsis !important;
                    white-space: nowrap !important;
                }
                .el-form-item__content {
                    margin-left: 30px !important;
                    display: inline-block !important;
                }
            }
        }

        .post-btn {
            padding-top: 30px;
        }

        .no-she-ding{
            display: block;
            margin: 16px 0 24px 38px;
        }
    }
</style>